<template>
  <div class="energy-min-container">
    <div class="energy-min-item">
      <div class="energy-min-item-header">
        <div class="energy-min-item-header-title" style="font-size: 14px;">UC</div>
        <div class="energy-min-item-header-right">
          <div class="energy-min-item-header-right-btn" style="color: #00E5FF;">标煤</div>
          <div class="energy-min-item-header-right-btn">费用</div>
          <div class="energy-min-item-header-right-img"><img :src="settingPng" /></div>
          <div class="energy-min-item-header-right-img"><img :src="bigPng" /></div>
        </div>
      </div>
      <div class="energy-min-item-main" ref="leftItem0Ref"></div>
    </div>

    <div class="energy-min-item">
      <div class="energy-min-item-header">
        <div class="energy-min-item-header-title" style="font-size: 14px;">UC-财务版</div>
        <div class="energy-min-item-header-right">
          <div class="energy-min-item-header-right-btn" style="color: #00E5FF;">标煤</div>
          <div class="energy-min-item-header-right-btn">费用</div>
          <div class="energy-min-item-header-right-img"><img :src="settingPng" /></div>
          <div class="energy-min-item-header-right-img"><img :src="bigPng" /></div>
        </div>
      </div>
      <div class="energy-min-item-main" ref="leftItem1Ref"></div>
    </div>

    <div class="energy-min-item">
      <div class="energy-min-item-header">
        <div class="energy-min-item-header-title" style="font-size: 14px;">涂布UC</div>
        <div class="energy-min-item-header-right">
          <div class="energy-min-item-header-right-btn" style="color: #00E5FF;">标煤</div>
          <div class="energy-min-item-header-right-btn">费用</div>
          <div class="energy-min-item-header-right-img"><img :src="settingPng" /></div>
          <div class="energy-min-item-header-right-img"><img :src="bigPng" /></div>
        </div>
      </div>
      <div class="energy-min-item-main" ref="leftItem2Ref"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

const data = [
  [
    [28604, 77, 42972254, '达成率', 1990],
    [31163, 77.4, 27662440, '达成率', 1990],
    [1516, 68, 42972254, '达成率', 1990],
    [13670, 74.7, 10582082, '达成率', 1990],
    [28599, 75, 4986705, '达成率', 1990],
    [29476, 77.1, 56943299, '达成率', 1990],
    [31476, 75.4, 78958237, '达成率', 1990],
    [28666, 78.1, 254830, '达成率', 1990],
    [1777, 57.7, 42972254, '达成率', 1990],
    [29550, 79.1, 42972254, '达成率', 1990],
    [2076, 67.9, 20194354, '达成率', 1990],
    [12087, 72, 42972254, '达成率', 1990],
    [24021, 75.4, 3397534, '达成率', 1990],
    [43296, 76.8, 4240375, '达成率', 1990],
    [10088, 70.8, 38195258, '达成率', 1990],
    [19349, 69.6, 147568552, '达成率', 1990],
    [10670, 67.3, 53994605, '达成率', 1990],
    [26424, 75.7, 57110117, '达成率', 1990],
    [37062, 75.4, 252847810, '达成率', 1990]
  ],
  [
    [44056, 81.8, 23968973, '损失率', 2015],
    [43294, 81.7, 35939927, '损失率', 2015],
    [13334, 76.9, 42972254, '损失率', 2015],
    [21291, 78.5, 11389562, '损失率', 2015],
    [38923, 80.8, 5503457, '损失率', 2015],
    [37599, 81.9, 64395345, '损失率', 2015],
    [44053, 81.1, 80688545, '损失率', 2015],
    [42182, 82.8, 329425, '损失率', 2015],
    [5903, 66.8, 42972254, '损失率', 2015],
    [36162, 83.5, 126573481, '损失率', 2015],
    [1390, 71.4, 25155317, '损失率', 2015],
    [34644, 80.7, 50293439, '损失率', 2015],
    [34186, 80.6, 4528526, '损失率', 2015],
    [64304, 81.6, 5210967, '损失率', 2015],
    [24787, 77.3, 38611794, '损失率', 2015],
    [23038, 73.13, 42972254, '损失率', 2015],
    [19360, 76.5, 78665830, '损失率', 2015],
    [38225, 81.4, 64715810, '损失率', 2015],
    [53354, 79.1, 42972254, '损失率', 2015]
  ]
];

export default {
  name: 'EnergyMinLeftCmp',
  data () {
    return {
      bigPng: require("../../assets/big.png"),
      settingPng: require("../../assets/setting.png"),
      myChart0: null,
      myChart1: null,
      myChart2: null,
    }
  },
  mounted() {
    var that = this;
    this.$nextTick(() => {
        
      that.initCharts0();
      that.initCharts1();
      that.initCharts2();
    })

    window.addEventListener("resize", this.resizeAll);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeAll);

    this.myChart0 && this.myChart0.dispose();
    this.myChart1 && this.myChart1.dispose();
    this.myChart2 && this.myChart2.dispose();
  },
  methods: {
    initCharts0(){
      this.myChart0 = echarts.init(this.$refs.leftItem0Ref)
      
      let option = {
        legend: {
          textStyle: {
            color: '#FFF',
            fontSize: 12,
          },
          itemWidth: 20,
          itemHeight: 10,
          itemGap: 10,
          icon: 'circle',
          padding: [10 ,0,0,0]
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#FFF'
            }
          }
        },
        grid: {
          top: '30px',
          left: '10px',
          right: '10px',
          bottom: '12px',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['YTD', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: '0',
              color: '#FFF'
            },
            // boundaryGap: false, // x轴两边是否留白
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 5,
            interval: 1,
            axisLabel: {
              formatter: '{value} ',
              color: '#FFF'
            },
            // 坐标轴分割线
            splitLine: {
              lineStyle: {
                color: ['#FFF'],
                opacity: 0.1
              }
            },
          },
          {
            type: 'value',
            name: '',
            min: 0,
            max: 5,
            interval: 1,
            axisLabel: {
              formatter: '{value} ',
              color: '#FFF'
            },
            // 坐标轴分割线
            splitLine: {
              lineStyle: {
                color: ['#FFF'],
                opacity: 0.1
              }
            },
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [
              4.5
            ],
            itemStyle: {
              color: '#00E5FF',
            },
            barMaxWidth: '20%',
            showBackground: true,
          },
          {
            name: '实际UC',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: ['', 2.8, 1.8, 2, 0.5, 1.5],
            itemStyle: {
              color: '#009ADF'
            },
            smooth: true,
            // 区域填充样式
            areaStyle: {
              color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: 'rgba(0,154,223, .3)' // 0% 处的颜色
                  }, {
                      offset: 1, color: 'rgba(0,154,223,0.2)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
              }
            },
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            name: '目标UC',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: ['', 1, 2, 3.5, 3.8, 2.5],
            itemStyle: {
              color: '#14E0FF'
            },
            smooth: true,
            // 区域填充样式
            areaStyle: {
              color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: 'rgba(20, 224, 255, .3)' // 0% 处的颜色
                  }, {
                      offset: 1, color: 'rgba(20,224,255,0.2)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
              }
            },
          }
        ]
      };
      
      this.myChart0.setOption(option)
      // window.addEventListener('resize', this.resize0)  ]
    },

    initCharts1(){
      this.myChart1 = echarts.init(this.$refs.leftItem1Ref)
      
      let option = {
        legend: {
          right: '10%',
          top: '3%',
          data: ['达成率', '损失率'],
          textStyle: {
            color: '#FFF',
            fontSize: 12,
          },
        },
        grid: {
          top: '30px',
          left: '10px',
          right: '10px',
          bottom: '12px',
          containLabel: true,
        },
        xAxis: {
          splitLine: {
            lineStyle: {
                color: ['#FFF'],
                opacity: 0.1
              }
          },
          axisLabel: {
              formatter: '{value} ',
              color: '#FFF'
            },
        },
        yAxis: {
          splitLine: {
            lineStyle: {
                color: ['#FFF'],
                opacity: 0.1
              }
          },
          axisLabel: {
              formatter: '{value} ',
              color: '#FFF'
            },
          scale: true
        },
        series: [
          {
            name: '达成率',
            data: data[0],
            type: 'scatter',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                formatter: function (param) {
                  return param.data[3];
                },
                position: 'top'
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0,154,223, 0.5)',
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: 'rgb(0,154,223)'
                },
                {
                  offset: 1,
                  color: 'rgb(0,90,191)'
                }
              ])
            }
          },
          {
            name: '损失率',
            data: data[1],
            type: 'scatter',
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                formatter: function (param) {
                  return param.data[3];
                },
                position: 'top'
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(25, 100, 150, 0.5)',
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: 'rgb(129, 227, 238)'
                },
                {
                  offset: 1,
                  color: 'rgb(25, 183, 207)'
                }
              ])
            }
          }
        ]
      };
            
      this.myChart1.setOption(option)

      // window.addEventListener('resize', this.resize1)
    },

    initCharts2(){
      this.myChart2 = echarts.init(this.$refs.leftItem2Ref)
        
        let option = {
          legend: {
            textStyle: {
              color: '#FFF',
              fontSize: 12,
            },
            itemWidth: 20,
            itemHeight: 10,
            itemGap: 10,
            icon: 'circle',
            padding: [10 ,0,0,0]
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#FFF'
              }
            }
          },
          grid: {
            top: '30px',
            left: '10px',
            right: '10px',
            bottom: '12px',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: ['YTD', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05'],
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                interval: '0',
                color: '#FFF'
              },
              // boundaryGap: false, // x轴两边是否留白
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              min: 0,
              max: 7,
              interval: 1,
              axisLabel: {
                formatter: '{value} ',
                color: '#FFF'
              },
              // 坐标轴分割线
              splitLine: {
                lineStyle: {
                  color: ['#FFF'],
                  opacity: 0.1
                }
              },
            },
            {
              type: 'value',
              name: '',
              min: 0,
              max: 7,
              interval: 1,
              axisLabel: {
                formatter: '{value} ',
                color: '#FFF'
              },
              // 坐标轴分割线
              splitLine: {
                lineStyle: {
                  color: ['#FFF'],
                  opacity: 0.1
                }
              },
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              data: [
                6.2, 
              ],
              itemStyle: {
                color: '#00E5FF',
              },
              barMaxWidth: '20%',
              // showBackground: true,
            },
            {
              name: '目标UC',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              data: [
                '', 3.3, 4, 3.5, 2.2, 4.5
              ],
              itemStyle: {
                color: '#00E5FF',
              },
              barMaxWidth: '20%',
              // showBackground: true,
            },
            {
              name: '实际UC',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              data: [
                '', 2.8, 3.2, 2.6, 1.5, 3.5
              ],
              itemStyle: {
                color: '#009ADF',
              },
              barMaxWidth: '20%',
              // showBackground: true,
            },
          ]
        };
        this.myChart2.setOption(option)

        // window.addEventListener('resize', this.resize2)
    },

    resize0() {
      if(this.myChart0) {
        this.$nextTick(() => {
          this.myChart0.resize();

        });
      }
    },
    resize1() {
      if(this.myChart1) {
        this.$nextTick(() => {
          this.myChart1.resize();
        });
      }
    },
    resize2() {
      if(this.myChart2) {
        this.$nextTick(() => {
          this.myChart2.resize();
        });
      }
    },

    resizeAll() {
      this.resize0();
      this.resize1();
      this.resize2();
    }
  },
}
</script>

<style lang="scss" scoped>
.energy-min-container{
  width: 32%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .energy-min-item {
    width: 100%;
    height: 33.3%;
    display: flex;
    flex-direction: column;
    background: rgba(21,56,99,0.4);
    margin-top: 20px;

    .energy-min-item-header {
      height: 40px;
      background: rgba(21,56,99,0.4);
      font-size: .12rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .energy-min-item-header-title {
        margin: 8px 20px;
        font-weight: bold;
        font-size: .225rem;
        font-family: YouSheBiaoTiHei;
        color: #FFFFFF;
        font-style: italic;
      }

      .energy-min-item-header-right {
        display: flex;
        flex-direction: row;
        margin-right: 15px;

        .energy-min-item-header-right-btn {
          font-size: .175rem;
          vertical-align: center; 
          padding: 5px 11px;
          font-family: HarmonyOS_Sans_SC;
          background: rgba(255,255,255,0.14);
          border-radius: 6px;
          margin-right: 10px;
        }

        .energy-min-item-header-right-img {
          display: flex;
          align-items: center;
          font-size: .175rem;
          font-family: HarmonyOS_Sans_SC;
          margin-left: 15px;
        }
      }
    }
    .energy-min-item-main {
      flex: 1;
    }
  }
}
</style>
